<template>
  <div class="app-container">
    <Ht-search-form
      v-show="showSearch"
      :dictMap="dictMapAsync"
      :queryParams="queryParams"
      :outputQueryParams="queryParams"
      :formOptions="formOptions"
      :advOptions="advOptions"
      permission="user:expandConfInfo:view"
    ></Ht-search-form>
    <ht-table
      ref="dataTable"
      :multi-select="true"
      :dictMap="dictMap"
      :tableBindColumns="tableBindColumns"
      :opButtonList="opButtonList"
      :reqConfig="reqConfig"
      :queryParams="queryParams"
    >
      <template v-slot:operate>
        <el-table-column
          label="操作"
          align="center"
          width="120"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="handleUpdate(scope.row)"
              v-hasPermi="['user:expandConfInfo:edit']"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="text"
              @click="handleDelete(scope.row)"
              v-hasPermi="['user:expandConfInfo:remove']"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </template>
    </ht-table>

    <!-- 添加或修改板块配置对话框 -->
      <edit ref="editForm" @editComplete="changeOpen"></edit>
  </div>
</template>

<script>
import { listPageMixin } from "@/libs/listPageMixin";
import {
  apiUrlConfig,
  queryExpandConfInfoList,
  removeExpandConfInfo
} from "@/api/authority_app/expandConfInfo/expandConfInfo";
import Edit from "./components/Edit";

export default {
  name: "expandConfInfo",
  components: { Edit },
  mixins: [listPageMixin],

  data() {
    return {
      queryParams: {
        paramCode: "",
        paramName: "",
        parentTable: "",
        componentType: "",
        dictCode: "",
        isTableShow: "",
        isSearch: ""
      },
      formOptions: [],
      advOptions: [],
      searchFormDictList: [
        "parent_table_type",
        "expand_compment_type",
        "sys_yes_no"
      ],
      dictMapAsync: {},
      reqConfig: apiUrlConfig,
      // 列信息
      tableBindColumns: [
        { label: `参数编码`, prop: "paramCode" },
        { label: `参数名称`, prop: "paramName" },
        { label: `父表`, prop: "parentTable", dictCode: "parent_table_type" },
        {
          label: `控件类型`,
          prop: "componentType",
          dictCode: "expand_compment_type"
        },
        { label: `字典类型`, prop: "dictCode" },
        { label: `表格列`, prop: "isTableShow", dictCode: "sys_yes_no" },
        { label: `查询条件`, prop: "isSearch", dictCode: "sys_yes_no" },
        {
          label: `创建时间`,
          prop: "createTime"
        }
      ],
      opButtonList: () => {
        return [
          {
            label: "新增",
            type: "primary",
            icon: "el-icon-plus",
            permission: "user:expandConfInfo:add",
            actionType:'add',
            clickFun: () => {
              this.handleAdd();
            }
          },
          {
            label: "删除",
            type: "danger",
            icon: "el-icon-delete",
            permission: "user:expandConfInfo:remove",
            actionType:'del'
          }
        ];
      },
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 任务配置数据
      expandConfInfoData: null,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {
        paramCode: "",
        paramName: "",
        parentTable: "",
        componentType: "",
        dictCode: "",
        isTableShow: "",
        isSearch: ""
      },
      totalRecord: 0,
      totalPage: 0,
      needCount: 0,
      // 查询参数

      disabled: false,
      parentTableEnums: [],
      componentTypeEnums: [],
      isTableShowEnums: [],
      isSearchEnums: []
    };
  },
  mounted() {
    const formOptions = [
      {
        type: "input",
        prop: "paramCode",
        defaultAttr: {
          size: "small",
          label: "参数编码",
          placeholder: "请输入参数编码",
        },
      },
      {
        type: "input",
        prop: "paramName",
        defaultAttr: {
          size: "small",
          label: "参数名称",
          placeholder: "请输入参数名称",
        },
      },
      {
        type: "dict",
        dict: "parent_table_type",
        prop: "parentTable",
        selectOptionList: [],
        defaultAttr: {
          size: "small",
          label: "父表",
          placeholder: "请选择父表",
        },
      },
    ];
    const advOptions = [
      {
        type: "input",
        prop: "dictCode",
        defaultAttr: {
          size: "small",
          label: "字典类型",
          placeholder: "请输入字典类型",
        },
      },
      {
        type: "dict",
        dict: "expand_compment_type",
        prop: "componentType",
        selectOptionList: [],
        defaultAttr: {
          size: "small",
          label: "控件类型",
          placeholder: "请选择控件类型",
        },
      },
      {
        type: "dict",
        dict: "sys_yes_no",
        prop: "isTableShow",
        selectOptionList: [],
        defaultAttr: {
          size: "small",
          label: "是否展示",
          placeholder: "请选择是否展示",
        },
      },
      {
        type: "dict",
        dict: "sys_yes_no",
        prop: "isSearch",
        selectOptionList: [],
        defaultAttr: {
          size: "small",
          label: "是否查询",
          placeholder: "请选择是否查询",
        },
      },
    ];
    this.formOptions = formOptions;
    this.advOptions = advOptions;
    this.dictMapAsync = this.getDictMap();
  },
  created() {},
  methods: {
    listReq(pageParams) {
      return queryExpandConfInfoList(
        Object.assign({}, this.addDateRange(this.queryParams), pageParams)
      );
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.$refs.dataTable.doQuery(true);
    },

    // 表单重置
    reset() {
      this.form = {
        paramCode: "",
        paramName: "",
        parentTable: "",
        componentType: "",
        dictCode: "",
        isTableShow: "",
        isSearch: ""
      };
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = {
        paramCode: "",
        paramName: "",
        parentTable: "",
        componentType: "",
        dictCode: "",
        isTableShow: "",
        isSearch: ""
      };
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.$refs.editForm.show()
    },
    /** 修改按钮操作 */
    handleUpdate: function(row) {
      this.$refs.editForm.show(row.id)
    },

    /** 删除按钮操作 */
    handleDelete(row) {
      const id = row.id || this.ids;
      this.$confirm("是否确认删除数据?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(function() {
          return removeExpandConfInfo(id);
        })
        .then(() => {
          this.$refs.dataTable.doQuery();
          this.msgSuccess("删除成功");
        })
        .catch(action => {});
    },

    /** 类型转换 */
    parentTableTypeFormatter: function(row) {
      return this.selectDictLabel(this.parentTableEnums, row.parentTable);
    },
    /** 类型转换 */
    componentTypeTypeFormatter: function(row) {
      return this.selectDictLabel(this.componentTypeEnums, row.componentType);
    },
    /** 类型转换 */
    isTableShowTypeFormatter: function(row) {
      return this.selectDictLabel(this.isTableShowEnums, row.isTableShow);
    },
    /** 类型转换 */
    isSearchTypeFormatter: function(row) {
      return this.selectDictLabel(this.isSearchEnums, row.isSearch);
    },

    //一级弹窗状态修改
    changeOpen(state) {
      if (state) {
        this.$refs.dataTable.doQuery();
      }
    }
  }
};
</script>
